<template>

  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="80px">

      <div class="common-form">活动设置</div>

       
    <el-form-item label="冠军" >
        <el-select v-model="form.european_country_id" clearable>
          <template>
            <el-option :value="0" key="0" label="请选择冠军"></el-option>
            <el-option v-for="item in country_list"
              :value="item.european_country_id"
              :key="item.european_country_id"
              :label="item.country"
            ></el-option>
          </template>
        </el-select>
    </el-form-item>

      <el-form-item label="活动图" prop="bg_img" :rules="[{required: true,message: '请上传图片 '}]">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image','bg_img')">选择图片</el-button>
          <div v-if="form.bg_img" class="img mt10">
            <img :src="form.bg_img" width="100" height="100"/>
          </div>
        </el-row>
      </el-form-item>

       <!--活动时间-->
   
     <el-form-item label="开始时间" prop="start_time"
      :rules="[{ required: true, message: '请选择开始时间', trigger: 'changes' }]">
      <el-date-picker
        v-model="form.start_time"
        type="datetime"
        placeholder="开始时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
    </el-form-item>

    
    <el-form-item label="结束时间" prop="end_time"
      :rules="[{ required: true, message: '请选择结束时间', trigger: 'changes' }]">
      <el-date-picker
        v-model="form.end_time"
        type="datetime"
        placeholder="结束时间"
        format="yyyy-MM-dd HH:mm"
        value-format="yyyy-MM-dd HH:mm"></el-date-picker>
    </el-form-item>
    

    <el-form-item label="背景色" prop="bg_color" :rules="[{required: true,message: '请输入背景色'}]">
        <el-color-picker v-model="form.bg_color" @change="change"></el-color-picker>
    </el-form-item>

    <el-form-item label="冠军规则">
      <div class="edit_container" v-if="editorContentShow">
        <Uediter :text="form.rule"  :config="ueditor.config" ref="ue" @contentChange="contentChangeFunc"></Uediter>
      </div>
      <!-- <div class="edit_container" v-else-if="!form.rule">
        <Uediter :text="form.rule"  :config="ueditor.config" ref="ue" @contentChange="contentChangeFunc"></Uediter>
      </div> -->
    </el-form-item>

  

    <el-form-item label="比分规则" >
      <div class="edit_container" v-if="editorContentShow">
        <Uediter2 :text="form.score_rule"  :config="ueditor.config" ref="ue1" @contentChange="contentChangeFunc2"></Uediter2>
      </div>
      <!-- <div class="edit_container" v-else-if="!form.score_rule">
        <Uediter2 :text="form.score_rule"  :config="ueditor.config" ref="ue1" @contentChange="contentChangeFunc2"></Uediter2>
      </div> -->
    </el-form-item>
   


      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
               <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>

    <!--图片组件-->
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">
      上传图片
    </Upload>
  </div>
</template>

<script>


import europeanApi from '@/api/european.js';
import Upload from '@/components/file/Upload';
import Uediter from '@/components/UE.vue';
import Uediter2 from '@/components/UE2.vue';
export default {
  components: {
    Upload,
    /*编辑器*/
    Uediter,
    Uediter2,

  },
  data() {
    return {
      
       /*富文本框配置*/
      ueditor: {
        text: '',
        config: {
          initialFrameWidth: 500,
          initialFrameHeight: 500
        }
      },

    
      is_upload: false,
      config: {
        total: 9,file_type: 'image',
      },

      /*时间*/
      timeVal: new Date(2016, 9, 10, 8, 0, 0),
      /*如果没有后面的-8.64e7就是不可以选择今天的*/
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
    
    /*form表单数据*/
      form: {
        start_time: '',
        end_time: '',
        bg_img: '',
        european_country_id:0,
        rule:'',
        bg_color:'',
        score_rule:''

      },

      editorContentShow:false,
      country_list:[],
      /*是否上传图片*/
      isupload: false,
      loading: false,
     
    };
  },
  created() {
  
    this.getData();
  
  
  },

  methods: {
    
     /*获取富文本内容*/
    contentChangeFunc(e){
      console.log('富文本',e);
      this.form.rule=e;
    },

     /*获取富文本内容*/
     contentChangeFunc2(e){
      this.form.score_rule=e;
    },

    change(e){
      this.form.bg_color = e;
    },

    /*打开上传图片*/
    openUpload: function (file_type, file_name) {
    
      this.file_name = file_name;
      if (file_type == 'image') {
        this.config = {
          total: 1,
          file_type: 'image'
        };
      } 
      this.isupload = true;
    },

    /*上传商品图片*/
    returnImgsFunc(e) {
      console.log('上传',e)
      if (e != null) {
        if (this.file_name == 'bg_img') {
          this.form.bg_img = e[0].file_path;
        }


      }
      this.isupload = false;
    },

  

    /*修改*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          europeanApi.editactivity(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: '操作成功',
                type: 'success'
              });
              self.$router.push('/plus/european/european/editactivity');
            }).catch(error => {
            self.loading = false;
          });
        }
      });
    },


   

    /*获取参数*/
    getData() {
      let self = this;
      europeanApi.geteditactivity({
       
      }, true)
        .then(res => {
         
          // if(res.data.model){
            self.form = res.data.model
            self.editorContentShow = true
          // }
          self.country_list = res.data.country_list
        })
        .catch(error => {

        });

    },
  


    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }

  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
<style lang="scss">
.dialog-footer-at-remark-map{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
</style>
